@use '../../../../styles/_globals.scss' as *;

:host,
:host * {
  -webkit-tap-highlight-color: transparent;
}

:host {
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  user-select: none;
  min-width: 320px;
  max-width: 320px;
  display: block;

  @media (min-width: 370px) {
    min-width: 352px;
    max-width: 352px;
  }

  :host-context([dir='rtl']) {
    direction: rtl;
  }

  mat-form-field {
    width: 100%;
  }

  ::ng-deep {
    .mat-calendar-header {
      padding-top: 0;
    }

    .mat-calendar-body-cell-content {
      background: transparent !important;
    }

    .mat-calendar-body-cell:focus .mat-calendar-body-cell-content {
      outline: 2px solid var(--c-accent);
    }

    .mat-calendar-body-selected {
      background: var(--c-primary) !important;
    }

    .mat-calendar-controls {
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }
}

:host h4 {
  text-align: center;
  padding-top: 16px;
  font-size: 14px;
  font-weight: bold;
}

.form-ctrl-wrapper {
  margin: 0 16px;
  margin-top: 16px;
  //border-top: 1px solid var(--separator-color);
}

.press-enter-msg {
  text-align: center;
  font-weight: bold;
  padding: 4px 12px;
  position: absolute;
  left: 50%;
  z-index: 11;
  box-shadow: var(--whiteframe-shadow-1dp);
  border-radius: 8px;
  margin-top: -12px;
  white-space: nowrap;
  transform: translateX(-50%);

  background: var(--bg-lighter);
}

:host ::ng-deep mat-month-view .mat-calendar-body-today {
  color: transparent;

  &:after {
    @include materialIcon('wb_sunny');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color);
  }
}

.quick-access {
  display: flex;
  justify-content: space-evenly;
  border-bottom: 1px solid var(--extra-border-color);
  height: 48px;

  > button {
    height: 48px;
    flex-grow: 1;
    border-radius: 4px !important;

    ::ng-deep .mat-mdc-button-persistent-ripple {
      border-radius: 4px !important;
    }
  }

  button + button {
    border-left: 1px solid var(--extra-border-color);
  }
}
